<style lang="scss" scoped>
	.pgoods {
		height: 100%;
		@include n-col1;
		align-items: stretch;
		
		.pgoods-list{
			display: grid;
       grid-template-columns: repeat(auto-fill,minmax(180px,1fr));

			//grid-template-columns: repeat(auto-fill, minmax(220px,1fr) );
			grid-auto-rows: max-content;
			gap:20px;
			justify-content: center;
			>li{
				width: 100%;
				min-width: 0;
				min-height: 0;
				padding: 12px 12px 20px 12px;
				border-radius: 30px;
				background: $theme-bg-white1;
				position: relative;
				.el-icon-close{
					position: absolute;
					right: -5px;
					top: -5px;
					width: 20px;
					height: 20px;
					background: $theme-red;
					color: #fff;
					border-radius: 50%;
					@include n-row2;
				}
				>img{
					border-radius: 20px;
					object-fit: cover;
					height: 160px;
					width: 100%;
					background:  $theme-bg-white4;
				}
				>h3{
					margin-top: 10px;
					line-height: 1.6;
					min-height: 40px;
					font-weight: bold;
					font-size: 19px;
					color: $theme-text3;
				}
				>footer{
					@include n-row1;
					margin-top: 10px;
					gap:5px;
					white-space: nowrap;
					>i{
						color: $theme-color;
						width: 36px;
						@include n-row2;
						height: 36px;
						font-size: 20px;
					}
				}
			}
			.pgoods-list-price{
				flex: 1;
				width: 0;
				>h3{
					line-height: 1;
					font-weight: bold;
					color: $theme-text5;
					@include n-row1;
					gap:10px;
					font-size: 17px;
					>span{
						line-height: 1;
						gap:3px;
						@include n-row1;
						align-items: flex-end;
						>em{
							line-height: 1;
							color: $theme-red;
						}
						>i{
							line-height: 1;
							font-size: 12px;
						}
						&+span{
							text-decoration: line-through;
						}
					}
				}
				>p{
					font-size: 14px;
					line-height: 1;
					margin-top: 10px;
					color: $theme-text5;
				}
			}
		}
    .pservice-detail{
			background: $theme-bg-white4;
			padding: 20px;
			>img{
				width: 100%;
				border-radius: 10px;
			}
			>article{
				margin-top: 20px;
				border-radius: 10px;
				background: $theme-bg-white1;
				padding: 20px;
				>h3{
					@include n-row5;
					gap:10px;
					font-size: 16px;
					font-weight: bold;
					color: $theme-text2;
					>span{
						font-weight: 400;
						border-radius: 10px;
						height: 20px;
						background: var(--theme-grey-light9);
						font-size: 12px;
						color: $theme-text5;
						@include n-row2;
						gap:5px;
						padding: 0 5px;
					}
				}
				>p{
					@include n-row1;
					font-size: 20px;
					align-items: flex-end;
					color: $theme-red;
					margin-top: 20px;
					font-weight: bold;
					>i{
						font-size: 15px;
						transform: translate(0,-20%);
						line-height: 1;
					}
				}
			}
			>section{
				margin-top: 20px;
				border-radius: 10px;
				background: $theme-bg-white1;
				padding: 20px;
				font-size: 14px;
				line-height: 1.6;
				color: $theme-text3;
			}
		}
	}
</style>

<template>
	<div class="n-page pgoods" v-loading="loading">
		<h1 class="n-page-h1">
			<em>{{ $route.meta.title }}</em>
<!-- <el-button icon="el-icon-plus" type="primary" @click="add">上传礼品</el-button>-->
		</h1>
		<ul class="pgoods-list">
			 
			<li v-for="item,idx in list" :key="idx">
				<i class="el-icon-close" v-if="($store.userInfo || {}).type === 1" @click="del(item)"></i>
				<img @click="detail(item)" :src="$conf.env.baseUrl + item.litpic_local" />
				<h3 @click="detail(item)" v-html="item.title"></h3>
				<footer>
					<aside class="pgoods-list-price">
						<h3><span><em>￥{{item.membership_price}}</em><i></i></span>
<!--              <span>￥{{item.membership_price}}<i></i></span>-->
            </h3>
						<p>工厂价：</p>
            <p>￥{{item.agent_price}}</p>
					</aside>
					<el-button type="primary" @click="addOrder(item)">购买</el-button>
<!--					<i class="el-icon-phone-outline"></i>-->
				</footer>
			</li>
			 
		</ul>
		
		<n-handle class="n-page-dialog" :conf="handleConf.props" ref="handle" :compList="handleConf.compList" :btns="handleConf.btns"  @ok="handle"  :form="handleConf.form" />

    <n-handle class="n-page-dialog" :conf="orderConf.props" ref="orderHandle" :compList="orderConf.compList" :btns="orderConf.btns"  @ok="orderHandle"  :form="orderConf.form" />


    <n-handle class="n-page-dialog pservice-detailWrap" :conf="detailConf.props" ref="detail" :compList="detailConf.compList" >
			<template #detail>
				<div class="pservice-detail">
					<img :src="$conf.env.baseUrl + detailConf.form.litpic_local" />

					<article>
						<h3 v-html="detailConf.form.title"><span class="el-icon-view">{{detailConf.form.view_num }}</span></h3>
						<p><i>￥</i>{{detailConf.form.membership_price}}</p>
					</article>

					<section v-html="detailConf.form.details"></section>


				</div>
			</template>
		</n-handle>


	</div>
</template>

<script>
	export default {
		data() {
			return {
			  detailConf:{
					form:{},
					props:{title: '详情', insertEl:false, type:'dialog', size:'600px'},
					compList:[{type:"slot", slotName:'detail'}],
				},
				loading:false,
				list:[],
				params:{
					count:1,
					_total:0,
				},
				orderConf:{
					props:{title: '购买礼品', type:'dialog', size:'600px'},
					form:{},
					_form:{
						user_id:1,
						user_name:'',
						tel:'',
						city:'',
						address:'',
						quantity:'',
						shipping_address:'',
						product_list:[{}],
						remarks:'',
						actual_payment:'',
					},
					compList:[
						{ type: 'txt', k:'productName', label:'礼品名称'  },
						{ type: 'txt', k:'price', label:'价格', props:{style:'color: var(--theme-red) '}  },
						{
							type: 'num', label: '购买数量', required:true, min:1, precision:0, k: 'quantity', 
							on:{change:()=>{
								const {price,quantity,product_list} = this.orderConf.form;
								if(product_list)product_list[0].quantity = quantity;
								this.orderConf.form.actual_payment = (price * quantity || 0).toFixed(2)
							}},
						},
						{ type: 'txt', k:'actual_payment', label:'总金额', props:{style:'color: var(--theme-red) '}  },
						
						{type: 'text', label: '姓名', required:true, k: 'user_name'},
						{
							type: 'text', label: '手机号', required:true, k: 'tel',
							verif:({item,v})=> !(item.err = (!v || !(v + '').match(/^1\d{10}/)) ? '手机号有误' : '')
						},
						
						{ type: 'cascader', label: '区域', required:true, k: 'city',  options: this.$enu.address },
						{type: 'text', label: '详细地址', required:true, k: 'address'},
						{type: 'text', label: '备注', required:false, k: 'remarks'},
					],
					btns:[
						{ label: '确定', props:{type: 'primary'}, evKey: 'ok' },
					],
				},
				handleConf:{
					props:{title: '添加礼品', type:'dialog', size:'600px'},
					form:{},
					_form:{
						title:'',
						litpic_local:'',
						membership_price:'',
						agent_price:'',
						details:'',
						is_show:1,
						sort:'',
						create_time:'',
						view_num:10,
					},
					compList:[
					
						{type: 'text', label: '标题', required:true, k: 'title'},
						{
							type: 'upload', label: '缩略图', required:false, k: 'litpic_local', types:['png','jpg','jpeg','webp'],
							onUpload: async ({tg,conf,vm,files})=>{
								if(conf.files.length) return this.$msg('最多上传一张图片',2)
								const file = files[0];
								const item = { prog:0, type: 'img', path:'', name: file.name };
								conf.files.push(item)
								
								const form = new FormData();
								form.set('file',file)
								const reqConf = this.$api.user.upload(form,  )
								reqConf.bindEv('progressUpload',  ({loaded,total}) => item.prog = ~~(loaded / total * 100))
								const res = await this._req(reqConf.content);
								if (!res) return ( item.err = vm.$t('该文件上传失败'));
								item.path = this.$conf.env.baseUrl + res.file.filePath;
								item.path2 = res.file.filePath;
								this.handleConf.form[conf.k] = conf.files.map(v=>v.path2).join(',')
							},
						},
						
						
						{type: 'num', min:0, precision:2, label: '会员价', required:true, k: 'membership_price'},
						{type: 'num', min:0, precision:2, label: '代理商价格', required:true, k: 'agent_price'},
						{type: 'num', precision:0, label: '排序', required:true, k: 'sort'},
						{type: 'switch',  label: '是否显示', required:true, k: 'is_show'},
						{type: 'date',  label: '录入时间', required:true, k: 'create_time', props:{type:'datetime', 'default-time':'00:00:00' }},
						{
							type: 'rich-text', label: '详情', k: 'details',  required: true,
							compList:[ 'b','u','i','s','alignLeft','alignCenter','alignRight','subScript','superScript','font','fontSize','lineHeight','color','fontBg','format','clear','margin','padding','bg','border','hr','link','table' ]
						},
					],
					btns:[
						{ label: '确定添加', props:{type: 'primary'}, evKey: 'ok' },
					],
				},
			}
		},
		mounted() {
			this.getData();
		},
		methods: {
		  detail(row){
				this.detailConf.props.show = true;
				this.detailConf.form = row;

			},
			async del({id}){

        this.$confirm('此操作将永久删除该内容, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () =>  {
          const res = await this._req(this.$api.goods.delGoods({id}));
				  if(!res) return;
				  this.$msg();
				  this.getData();
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });



			},
			
			async getData(){
				const res = await this._req(this.$api.goods.getGoods(this.params));
				if(!res) return;
				this.list = res.results;
			},
			add(){
				if(!this.$auth.isLogin()) return this.$msg('请登录',2)
				
				const {handleConf} = this;
				handleConf.form = this.$base.clone(handleConf._form);
			
				handleConf.compList.forEach(v=>v.type === 'upload' && (v.files = []))
				handleConf.props.show = true;
			},
			// 新增或者编辑提交
			async handle(opt){
				const { handleConf:{props,form } } = this;
				if(!this.$refs.handle.verif()) return;
				const res = await this._req(this.$api.goods.createGoods(form),props);
				if(!res)return;
				this.$msg();
				this.getData();
				props.show = false;
			},
			addOrder(row){
				if(!this.$auth.isLogin()) return this.$msg('请登录',2)
				const {orderConf} = this;
				const {title:productName,membership_price:price} = row;
				orderConf.form = {...this.$base.clone(orderConf._form), user_id: this.$store.userInfo.user_id, productName, price, quantity:1, actual_payment: (price * 1).toFixed(2), product_list:[{name:productName,price,quantity:1  }]  };
				orderConf.form.id = row.id;
				orderConf.props.show = true;
			},
			async orderHandle(opt){
				const { orderConf:{props,form } } = this;
				if(!this.$refs.orderHandle.verif()) return;
				form.shipping_address = `${(form.city || []).join('')} ${form.address}`;
				const res = await this._req(this.$api.goods.createGiftOrder(form),props);
				if(!res)return;
				this.$msg();
				this.getData();
				props.show = false;
			},
		}
	}
</script>
